<template>
  <uv-popup
    ref="popup"
    mode="bottom"
    :round="35"
    :close-on-click-overlay="true"
    :overlay-opacity="0.5"
    bg-color="transparent"
    @change="onPopupChange"
    @close="handleCancel"
  >
    <view class="custom-picker-container">
      <!-- 标题 -->
      <view class="picker-header">
        <text class="picker-title">{{ title }}</text>
      </view>

      <!-- 滚动选择区域 -->
      <view class="picker-content">
        <picker-view
          :value="pickerValue"
          class="picker-view"
          :indicator-style="indicatorStyle"
          @change="handleChange"
        >
          <picker-view-column>
            <text
              v-for="(item, index) in columns"
              :key="index"
              class="picker-item"
              :class="{
                'selected': index === pickerValue[0],
                'near-selected': Math.abs(index - pickerValue[0]) === 1,
                'far': Math.abs(index - pickerValue[0]) > 1
              }"
            >{{ getItemText(item) }}</text>
          </picker-view-column>
        </picker-view>
      </view>

      <!-- 底部按钮 -->
      <view class="picker-footer">
        <view class="confirm-btn" @click="handleConfirm">
          <text class="btn-text">确定</text>
        </view>
        <view class="cancel-btn" @click="handleCancel">
          <text class="cancel-text">取消</text>
        </view>
      </view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  name: 'CustomPicker',
  props: {
    // 标题
    title: {
      type: String,
      default: '请选择'
    },
    // 列数据
    columns: {
      type: Array,
      default: () => []
    },
    // 默认选中的索引
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pickerValue: [0],
      indicatorStyle: 'height: 88rpx;'
    }
  },
  watch: {
    defaultIndex: {
      handler(val) {
        this.pickerValue = [val]
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 获取item需要显示的文字
     */
    getItemText(item) {
      if (typeof item === 'object' && item !== null) {
        return item.text || item.label || item.name || ''
      }
      return String(item)
    },

    /**
     * 弹窗状态变化
     */
    onPopupChange(e) {
      console.log('popup change:', e)
      // 如果弹窗隐藏了，显示 tabbar
      if (!e.show) {
        uni.showTabBar()
      }
    },

    /**
     * 打开选择器
     */
    open() {
      this.$refs.popup?.open()
    },

    /**
     * 关闭选择器
     */
    close() {
      this.$refs.popup?.close()
    },

    /**
     * 选择器值变化
     */
    handleChange(e) {
      console.log('picker change:', e.detail.value)
      this.pickerValue = e.detail.value
    },

    /**
     * 确认选择
     */
    handleConfirm() {
      const index = this.pickerValue[0]
      const item = this.columns[index]

      console.log('confirm:', { index, item })

      this.$emit('confirm', {
        value: [item],
        index: [index]
      })

      this.close()
    },

    /**
     * 取消选择
     */
    handleCancel() {
      this.$emit('cancel')
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
// 选择器容器
.custom-picker-container {
  background: url('/static/images/data/picker-bg.png') no-repeat;
  background-size: 100% 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// 标题
.picker-header {
  padding: 40rpx 32rpx 32rpx;

  .picker-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1a1a1a;
  }
}

// 内容区域
.picker-content {
  position: relative;
  padding: 0 32rpx;
  height: 440rpx;
}

.picker-view {
  width: 100%;
  height: 440rpx; // 固定高度，5个选项的高度
  position: relative;
  z-index: 2;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #999;
  transition: all 0.2s ease;

  // 选中项
  &.selected {
    font-size: 32rpx;
    font-weight: 600;
    color: #1a1a1a;
  }

  // 相邻项
  &.near-selected {
    font-size: 30rpx;
    color: #666;
  }

  // 远离项
  &.far {
    font-size: 26rpx;
    color: #ccc;
  }
}
// 覆盖 picker-view 的默认样式
::v-deep .uni-picker-view-mask {
  background: transparent !important;
  background-image: none !important;
}

::v-deep .uni-picker-view-indicator {
  background: transparent !important;
  background-image: none !important;
}
// 底部按钮区域
.picker-footer {
  padding: 32rpx 32rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
}

// 确定按钮
.confirm-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #06CBB6 0%, #04b3a0 100%);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(6, 203, 182, 0.3);
  
  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
  
  .btn-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
  }
}

// 取消按钮
.cancel-btn {
  padding: 16rpx 32rpx;
  
  &:active {
    opacity: 0.6;
  }
  
  .cancel-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>

